主要的畫面呈現都是lib的main.dart所編譯的結果，所以直接進入此檔案來了解運行原理吧

1. 定義了main這個function，flutter就知道要從何開始執行

    main() {
      //....
    }

2.建立一個組件

    import 'package:flutter/material.dart'; //引入扁平化設計風格的組件
    main() {
    }
    class MyApp extends StatelessWidget{ 
      //實作一個類別，他是繼承於剛剛引入的package中的stateless組件類別
    }

3. 把畫面需要的function做出來（就很像html吧）

    import 'package:flutter/material.dart'; 
    main() {
    }
    class MyApp extends StatelessWidget{ 
      build(context) { 
        //這個function將輸出內容
        //context將會有一些app的基本資訊
        return MaterialApp(); 
        //最後輸出結果要return出去他才知道
        //MaterialApp是整個扁平化app的最外層
      }
    }

4.把bar和背景加上去

    import 'package:flutter/material.dart'; 
    main() {
    }
    class MyApp extends StatelessWidget{ 
      build(context) { 
        return MaterialApp(
          home : Scaffold( //home裡面是一個scaffold，白色背景主題
            appBar: AppBar( //增加一個bar
              
            ),
          )
        ); 
      }
    }

註：滑鼠移到組件上，就可以看到有哪些屬性可以用

5. 執行類別

    import 'package:flutter/material.dart'; 
    main() {
      runApp(MyApp()); //運行下面定義的class
    }
    class MyApp extends StatelessWidget{ 
      build(context) { 
        return MaterialApp(
          home : Scaffold( 
            appBar: AppBar( 
              title : Text('我的APP') //增加bar的標題
            ),
          )
        ); 
      }
    }

6. 為了讓編輯時不要出錯，定義一下回傳值、變數、函式的形式

    import 'package:flutter/material.dart'; 
    void main() { //因為沒有return東西，所以加上void（若下面return東西就會報錯）
      runApp(MyApp()); //運行下面定義的class 
    }
    class MyApp extends StatelessWidget{ 
      Widget build(BuildContext context) { //因為build的回傳值是一個widget（此例是MaterialApp），故先定義
                                          //也定義一下build函式產生的物件
        return MaterialApp(
          home : Scaffold( 
            appBar: AppBar( 
              title : Text('我的APP')
            ),
          )
        ); 
      }
    }

7. 簡化為箭頭函式

    void main() => runApp(MyApp());

8. override標示

    import 'package:flutter/material.dart'; 
    void main() => runApp(MyApp());
    class MyApp extends StatelessWidget{ 
      @override //這個新的類別會覆蓋他繼承的類別(提示作用而已)
      Widget build(BuildContext context) { 
        return MaterialApp(
          home : Scaffold( 
            appBar: AppBar( 
              title : Text('我的APP')
            ),
          )
        ); 
      }
    }

9. 增加一個Card組件

    return MaterialApp(
          home : Scaffold( 
            appBar: AppBar( 
              title : Text('我的APP')
            ),
            body: Card( //一張卡片
              child: Column( //有一個欄位
                children: <Widget>[ //一個放了很多組件的陣列
                  Image(),
                  Text('Food Paradise')
                ],
              )
            )
          )
        ); 

10. 新增圖片

把圖片放到assets資料夾（自己創一個）中
要去pubspec.yaml指定檔案

      assets:
       - assets/food.jpg

回到main.dart設定Image組件

    Image.asset('assets/food.jpg'),

主題來源：
Learn Flutter & Dart to Build iOS & Android Apps